<template>
  <div>
    <!-- 接收@子组件发送的名字 = 父组件处理的函数名字 -->
    <!-- 传入子组件的名字=传入的数据 -->
    <kw16superTable
      :tableData="tableData"
      :currentPage="currentPage"
      :pageSizes="[2,4,6,8]"
      @CurrentChange="CurrentChange"
      @SizeChange="SizeChange"
      :total="total"
      :headerData="headerData"
    >
      <!-- v-slot:当前插槽的名字="传入给插槽的数据定义名" -->
      <template v-slot:operationBtn="{operationData}">
        <el-button type="text">编辑</el-button>
        <el-button type="text">删除</el-button>
      </template>
      <template v-slot:btnSlot>
        <div>
          <el-button size="small" type="primary" @click="dialogVisible = true">添加商品规格</el-button>
          <el-button size="small">批量删除</el-button>
        </div>
      </template>
      <template v-slot:formSlot>
        <div>
          <el-form :inline="true" :model="formInline">
            <el-form-item label="规格搜索">
              <el-input v-model="formInline.attr">
                <el-button slot="append" icon="el-icon-search" @click="storeproductrulelistFn()"></el-button>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </kw16superTable>
    <el-dialog
      title="属性规格"
      v-DragWindow
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClosedialogVisible"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item class="firstForm" label="规格名称" prop="attrname">
          <el-col :span="24">
            <el-input v-model="ruleForm.attrname"></el-input>
          </el-col>
        </el-form-item>
         <div class="circle" v-for="(item , index) of list">
        <span >{{item.name}}</span>
        <i class="el-icon-circle-close" @click="circleclose(index)"></i>
        <div  class="dynamicTags">
          <el-tag
           
            :key="tag"
            v-for="tag in item.dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(index, tag)"
          >{{tag}}</el-tag>
          <el-input
            class="input-new-tag"
            v-if="item.inputVisible"
            v-model="item.inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm(index)"
            @blur="handleInputConfirm(index)"
          ></el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput(index)">+ 添加</el-button>
        </div>
      </div>
        <!-- attrname shopattr attrabute -->
        <el-form-item label="规格" prop="shopattr" v-if="ruleType">
          <el-col>
            <el-input v-model="ruleForm.shopattr"></el-input>
          </el-col>
        </el-form-item> 
        <el-form-item label="规格值" prop="attrabute" v-if="ruleType">
          <el-col>
            <el-input v-model="ruleForm.attrabute"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item v-if="ruleType">
          <el-button type="primary" @click="addAttr()">确定</el-button>
          <el-button @click="ruleType = false">取消</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" v-if="!ruleType" @click="ruleType = true">添加新规格</el-button>
      </div>
       <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAttrFn()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import kw16superTable from "@/components/kw16superTable";
import { storeproductrulelist , storeproductrulesave} from "@/api/shop";
export default {
  name: "storecomment",
  data() {
    return {
        list:[
          // {
          //   name:"qweq",
          //   dynamicTags:["123"]
          // }
        ],
       dynamicTags: [],
        inputVisible: false,
        inputValue: '',
      rules: {
        attrname: [{ required: true, message: "规格名称", trigger: "blur" }]
      },
      ruleForm: {
        attrname: "",
        shopattr: "",
        attrabute: ""
      },
      dialogVisible: false,
      formInline: {
        attr: ""
      },
      total: 0,
      pageSizes: 2,
      currentPage: 1,
      headerData: [
        {
          prop: "attrid",
          label: "ID",
          width: "180"
        },
        {
          prop: "attrname",
          label: "规格名称",
          width: "180"
        },
        {
          prop: "shopattr",
          label: "商品规格"
        },
        {
          prop: "attrabute",
          label: "商品属性"
        }
      ],
      tableData: [],
      ruleType: false
    };
  },
  mounted() {
    let _self = this;
    _self.storeproductrulelistFn();
  },
  methods: {
    // 新增
    addAttrFn(){
      let _self = this;
      let data ={
        ruleName: _self.ruleForm.attrname,
        ruleValue:""
      }
      console.log(_self.list)
      let Arr = [];
      for(let item of  _self.list){
        Arr.push({
          value:item.name,
          detail:item.dynamicTags
        })
      }
      console.log(Arr)
      data.ruleValue = JSON.stringify(Arr);
      storeproductrulesave(data).then(res=>{
        console.log(res)
        if(res.code==500){
          _self.$message(res.message)
          
        }else{
          _self.dialogVisible = false;
          _self.storeproductrulelistFn()
        }
      })
    },
    circleclose(index){
      let _self = this;
      _self.list.splice(index , 1);
    },
    handleClose(index,tag) {
      let _self = this;
        _self.list[index].dynamicTags.splice( _self.list[index].dynamicTags.indexOf(tag), 1);
      },

      showInput(index) {
        let _self = this;
         _self.list[index].inputVisible = true;
    
      },

      handleInputConfirm(index) {
        let _self = this;
        if(_self.list[index].inputValue.trim()){
          _self.list[index].dynamicTags.push(_self.list[index].inputValue);
          _self.list[index].dynamicTags = [...new Set(_self.list[index].dynamicTags)];
          _self.list[index].inputValue= '';
           _self.list[index].inputVisible = false;
        }else{
           _self.list[index].inputValue= '';
           _self.list[index].inputVisible = false;
        }
        // let inputValue = this.inputValue;
        // if (inputValue) { "   "
        //   this.dynamicTags.push(inputValue);
        // }
        // this.inputVisible = false;
        // this.inputValue = '';
      },
   
    // addAttr 新增属性
    addAttr() {
      // ruleForm: {
      //   attrname:"",
      //   shopattr:"",
      //   attrabute:""
      //  },
      let _self = this;
      if (
        _self.ruleForm.shopattr.trim() == "" ||
        _self.ruleForm.attrabute.trim() == ""
      ) {
        _self.$message({
          message: "请添加规格名称",
          type: "warning"
        });
      }else{
     
        _self.list.push({
            name:_self.ruleForm.shopattr,
            dynamicTags:[_self.ruleForm.attrabute],
            inputValue:"",
            inputVisible:false
        })
        _self.ruleForm.shopattr = "";
        _self.ruleForm.attrabute = "";
        _self.ruleType =false;
          // {
          //   name:"qweq",
          //   dynamicTags:["123"]
          // }
      }
    },
    handleClosedialogVisible(done) {
      let _self = this;
      _self.$confirm('确定关闭弹窗吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         done();
        }).catch(() => {
          _self.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      
    },
    // 切换当前第几页
    CurrentChange(val) {
      let _self = this;
      console.log(val); //当前第几页
      _self.currentPage = val;
      _self.storeproductrulelistFn();
    },
    // 切换一页多少条
    SizeChange(val) {
      console.log(val); //一页多少条
      let _self = this;
      _self.pageSizes = val;
      _self.storeproductrulelistFn();
    },
    // 请求列表
    storeproductrulelistFn() {
      let _self = this;
      _self.tableData = [];
      let data = {
        keywords: _self.formInline.attr.trim(),
        limit: _self.pageSizes,
        page: _self.currentPage
      };
      storeproductrulelist(data).then(res => {
        console.log(res);
        _self.total = res.data.total;
        for (let item of res.data.list) {
          let ruleValue = JSON.parse(item.ruleValue);
          let ruleData = {
            attrid: item.id,
            attrname: item.ruleName,
            shopattr: "",
            attrabute: []
          };
          for (let item1 of ruleValue) {
            ruleData.shopattr = item1.value + " " + ruleData.shopattr;
            ruleData.attrabute = [...item1.detail, ...ruleData.attrabute];
          }
          ruleData.attrabute = ruleData.attrabute.join(",");
          console.log(ruleData);
          _self.tableData.push(ruleData);
        }
      });
    }
  },
  //  组件注册
  components: {
    kw16superTable
  }
};
</script>
<style >
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
.demo-ruleForm .firstForm {
  display: block;
}
.dynamicTags{
  margin: 10px;
}
.circle{
  margin: 10px;
}
</style>